<template>
    <div class="con">
        <div class="query">
            <yd-cell-group>
                <yd-cell-item arrow>
                    <span slot="left">日期：</span>
                    <yd-datetime type="month" v-model="date" slot="right" :end-date="endDate"
                                 :callback="getDate"></yd-datetime>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="list">
            <yd-preview v-for="(item, key) in list" :buttons="btns" :key="key">

                <yd-preview-header>
                    <div slot="left">{{item.symbol}}</div>
                    <div slot="right" style="color: red;">
                        {{'$ '+item.volume}}
                    </div>
                </yd-preview-header>
            </yd-preview>
        </div>
    </div>
</template>
<script>
    import AjaxHttp from '../../js/ajaxHttp.js';
    export default{
        data(){
            return {
                date: '2019-02',
                list: [],
                btns: [],
                endDate: ''
            }
        },
        created(){
            const date = new Date();
            const year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            this.date = year + '-' + month;
            this.endDate = year + '-' + month;
        },
        methods: {
            rebateAgent(selectDate){
                const _this = this;
                AjaxHttp.getHttp('trades/statistics/summaryTotalVolumeByMonth?selectDate=' + selectDate).then(function (response) {
                    console.log(response);
                    _this.list = response;
                });
            },
            getDate(){
                this.rebateAgent(this.date);
            }
        }
    }
</script>